<template>
  <div class="login">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="(item,i) in bgImgList" :key="i">
        <img class="img" :src="item" alt="">
      </el-carousel-item>
    </el-carousel>
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item>
          <div class="head-title">彩票管理系统</div>
        </el-form-item>
        <el-form-item prop="name">
          <el-input auto-complete="off" clearable placeholder="请输入用户名" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input auto-complete="off" clearable type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="ruleForm.remember">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="submit" type="primary" @click="submitForm">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
const login = namespace('login')

@Component({
  components: { }
})
export default class LoginIndex extends Vue {
  @login.Action getLogin
  @login.State login
  ruleForm = {
    name: '',
    password: '',
    remember: false
  }
  bgImgList = [
    require('static/img/loginBg0.jpg'),
    require('static/img/loginBg1.jpg'),
    require('static/img/loginBg3.jpg'),
    require('static/img/loginBg4.jpg'),
    require('static/img/loginBg5.jpg'),
    require('static/img/loginBg6.jpg'),
    require('static/img/loginBg7.jpg'),
    require('static/img/loginBg8.jpg'),
    require('static/img/loginBg9.jpg'),
    require('static/img/loginBg10.jpg'),
    require('static/img/loginBg11.jpg')
  ]
  rules = {
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { pattern: /admin/, message: '用户名不正确', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { pattern: /111111/, message: '密码不正确', trigger: 'blur' }
    ]
  }
  submitForm () {
    this.$refs['ruleForm'].validate((valid) => {
      if (valid) {
        const { name, password } = this.ruleForm
        const params = {
          username: name,
          password: password
        }
        this.getLogin(params).then(msg => {
          if (msg) {
            this.$message.error(msg)
          } else {
            this.$router.push('/')
          }
        }).catch(error => {
          this.$message.error(error)
        })
      } else {
        return false
      }
    })
  }
}
</script>
<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    background-color: #000000;
    .img {
      width: 100%;
      height: 100%;
    }
    .el-carousel {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .el-carousel__container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .submit {
      border-color: #ffffff;
      background: none;
    }
    .el-card {
      width: 300px;
      height: 280px;
      z-index: 2;
      background: none;
      opacity: 0.8;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -140px;
    }
    .el-carousel__indicators {
      position: absolute;
      width: 100%;
      left: 0;
    }
    .head-title {
      color: #ffffff;
      font-size: 18px;
      text-align: center;
    }
    .el-checkbox {
      color: #ffffff;
    }
    .el-form-item:last-child {
      margin-bottom: 0 !important;
    }
    .el-form-item__content {
      margin-left: 0 !important;
      .el-input {
        width: 260px;
      }
      .el-button {
        width: 260px;
      }
    }
  }
</style>
